<template>
  <div>
    <slot name="type"></slot>
    <el-form-item label="题目名称:" prop="name">
      <el-input placeholder="请输入名称" v-model="ruleForm.name"></el-input>
    </el-form-item>
    <slot name="range"></slot>
    <el-form-item label="题目难度:" prop="difficulty">
      <el-select v-model="ruleForm.difficulty" placeholder="题目难度" clearable>
        <el-option v-for="(item, index) in questiondifficulty.labelObj" :key="item" :label="item"
          :value="index"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="题目标签:" prop="label">
      <el-cascader placeholder="选择标签" v-model="setlabel" :options="grouplabel" filterable :props="{
        checkStrictly: true,
        multiple: true,
        value: 'ID',
        label: 'name',
      }" clearable />
    </el-form-item>
    <el-form-item label="Special Judge:" v-show="ruleForm.type === '代码'">
      <el-checkbox v-model="ruleForm.isspecialjudge" label="包含Special Judge（SPJ）"></el-checkbox>
    </el-form-item>
    <slot name="source"></slot>

    <el-form-item label="题目备注:">
      <el-input placeholder="请输入备注" v-model="ruleForm.goldremarks" />
    </el-form-item>

    <slot name="ismatch"></slot>
    <slot name="version"></slot>

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { getpidtoarr } from "../../../util/code";
import { removeDifficulty } from "../../../util/questionPermissions";
import { DATAdifficulty } from "../../../index/data/data";

type P = {
  ruleForm: Studycodemodel.Iquestion,
  grouplabel: Studycodemodel.ILabel[],
  changeruleform: (r: Studycodemodel.Iquestion) => void
}

// const e= defineEmits(['update:rule-form'])

const prop = defineProps<P>()

const store = useStore(Storekey);
const setlabel = computed({
  get() {
    const n = prop.ruleForm.questionlabel?.map((e) => e.labelid) as number[];
    return getpidtoarr(n || [], store.state.label?.rows || []);
  },
  set(v: number[][]) {
    if (v.length > 5) {
      ElMessage.error("标签最多选择5个");
      return;
    }
    prop.changeruleform({
      questionlabel: v.map((e) => {
        return {
          labelid: e[e.length - 1],
          questionid: prop.ruleForm?.ID,
        };
      }),
    })
  },
});

const getteam = computed(() => {
  return store.state.team?.rows || []
})
// 团队题库分组
const questiondifficulty = computed(() => {
  // 每个团队的 questiondifficulty 合并、并且去重去除undefined
  const hiddenQuestionDifficulty = getteam.value?.map(e => e?.questiondifficulty || []).flat().filter(e => e) || [];
  return removeDifficulty(DATAdifficulty, hiddenQuestionDifficulty)
})
</script>
